/*
 * @Description: 备份清单的列表
 * @Author: Zzt
 * @Date: 2022-08-17 10:37:11
 * @LastEditTime: 2022-08-18 12:00:59
 */

import { useMemo, useState } from 'react';
import { Button, Table } from 'antd';
import { useBackupListContext } from '../contexts/BackupListContext';
import GenerateOffline from './dialogs/GenerateOffline';

const { Column } = Table;

const list = [
  {
    id: 1,
    state: 0,
    mode: 1
  },
  {
    id: 2,
    state: 1,
    mode: 0
  }
];

const PageList = () => {
  const { remove, setSelectKey, selectItems } = useBackupListContext();

  const [visible, setVisible] = useState(false);
  const [selectTransfer, setSelectTransfer] = useState({});
  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const [btnDisable, setBtnDisable] = useState(false);
  const [displayProp, setDisplayProp] = useState('');
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };

  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };
  const ing = () => {
    setBtnDisable(true);
    setDisplayProp('');
  };
  const ed = () => {
    setBtnDisable(false);
    setDisplayProp('none');
  };
  /* 生成离线备份 */
  const generate = (data: any) => {
    setVisible(true);
    setSelectTransfer(data);
  };
  const closeEditDialog = () => {
    setVisible(false);
  };
  return (
    <>
      <Table dataSource={list} rowKey="id" bordered rowSelection={rowSelection}>
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column
          title="备份方式"
          dataIndex="mode"
          key="mode"
          align="center"
          render={(_: any, record: any) => <>{record.mode === 0 ? '全量备份' : '增量备份'}</>}
        />
        <Column title="触发方式" dataIndex="trigger" key="trigger" align="center" />
        <Column title="备份节点时间" dataIndex="nodeTime" key="nodeTime" align="center" />
        <Column title="完成备份时间" dataIndex="finishTime" key="finishTime" align="center" />
        <Column title="备份人" dataIndex="backupBy" key="backupBy" align="center" />
        <Column title="备份大小" dataIndex="size" key="size" align="center" />
        <Column
          title="状态"
          dataIndex="state"
          key="state"
          align="center"
          render={(_: any, record: any) => (
            <>{record.state === 0 ? '备份完成（100%）' : '备份中'}</>
          )}
        />
        <Column
          title="操作"
          key="active"
          align="center"
          width={150}
          render={(_text, record: any) => (
            <>
              {record.state === 0 ? ing : ed}
              <Button
                type="link"
                size="small"
                style={{ display: displayProp }}
                onClick={() => {
                  remove(record);
                }}
              >
                取消备份
              </Button>
              <Button type="link" size="small" disabled={btnDisable}>
                恢复
              </Button>
              <Button
                type="link"
                size="small"
                disabled={btnDisable}
                onClick={() => {
                  generate(record);
                }}
              >
                生成离线备份
              </Button>
            </>
          )}
        />
      </Table>
      {useMemo(
        () => (
          <GenerateOffline
            visible={visible}
            data={selectTransfer}
            onClose={() => {
              closeEditDialog();
            }}
          />
        ),
        [visible]
      )}
    </>
  );
};
export default PageList;
